<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="金顾云学院课程 - 专业融资知识视频课程，助力企业成长发展">
    <meta name="keywords" content="金顾云学院,学院课程,融资视频,金融培训,企业融资,金顾云">
    <title>学院课程 - 金顾云学院</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/academy-courses.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="js/load-nav.js"></script>
</head>
<body>
    <!-- 导航组件容器 -->
    <div id="nav-container"></div>

    <!-- 页面横幅 -->
    <section class="page-banner" style="background-image: url('https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/af17ffaf9934df5a0ede15316533c99.jpg'); background-position: center 0.5%;">
        <div class="container">
            <h1>学院课程</h1>
            <p>专业融资知识视频课程，助力企业成长发展</p>
        </div>
    </section>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 搜索和筛选区域 -->
            <div class="search-filter-section">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索课程标题...">
                    <button class="search-btn" id="searchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <div class="filter-tabs">
                    <button class="filter-btn active" data-category="all">全部课程</button>
                    <button class="filter-btn" data-category="企服公开会">企服公开会</button>
                    <button class="filter-btn" data-category="合伙人专区">合伙人专区</button>
                    <button class="filter-btn" data-category="思享会">思享会</button>
                    <button class="filter-btn" data-category="金融服务">金融服务</button>
                    <button class="filter-btn" data-category="融资相关">融资相关</button>
                    <button class="filter-btn" data-category="营销相关">营销相关</button>
                    <button class="filter-btn" data-category="创始人分享">创始人分享</button>
                </div>
            </div>

            <!-- 课程统计 -->
            <div class="course-stats">
                <div class="stat-item">
                    <div class="stat-number" id="totalCourses">0</div>
                    <div class="stat-label">课程总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="totalViews">0</div>
                    <div class="stat-label">总观看次数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="avgRating">0.0</div>
                    <div class="stat-label">平均评分</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">7</div>
                    <div class="stat-label">课程分类</div>
                </div>
            </div>

            <!-- 课程列表 -->
            <div class="course-grid" id="courseGrid">
                <!-- 课程卡片将通过JavaScript动态生成 -->
                <div class="loading">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>正在加载课程...</p>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination" id="pagination">
                <!-- 分页将通过JavaScript动态生成 -->
            </div>
            
            <!-- 俱乐部小程序提示区域 -->
            <div class="club-promotion">
                <div class="promotion-content">
                    <div class="promotion-text">
                        <i class="fas fa-mobile-alt"></i>
                        <span>更多知识学习请登录金顾云俱乐部小程序</span>
                    </div>
                    <div class="promotion-qr">
                        <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/2.jpg" alt="金顾云俱乐部小程序" class="qr-code">
                        <span class="qr-label">扫码关注</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 视频播放模态框 -->
    <div class="video-modal" id="videoModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="videoTitle">课程标题</h3>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="video-container" id="videoContainer">
                    <video id="videoPlayer" controls preload="metadata" playsinline 
                           controlslist="nodownload nofullscreen noremoteplayback" 
                           disablepictureinpicture 
                           oncontextmenu="return false;">
                        <source src="" type="video/mp4">
                        <source src="" type="video/webm">
                        <source src="" type="video/ogg">
                        您的浏览器不支持视频播放。请尝试使用Chrome、Firefox或Safari浏览器。
                    </video>
                    
                    <!-- 动态水印层 -->
                    <div class="video-watermark" id="videoWatermark">
                        <div class="watermark-text" id="watermarkText">
                            金顾云学院 - 仅供学习使用
                        </div>
                        <div class="watermark-time" id="watermarkTime"></div>
                                            <div class="watermark-floating" id="watermarkFloating">
                        <span>金顾云cfcyun版权所有</span>
                    </div>
                    </div>
                    
                    <!-- 防录屏遮罩 -->
                    <div class="video-protection-overlay" id="protectionOverlay"></div>
                    
                    <div class="video-error" id="videoError" style="display: none;">
                        <p>视频加载失败，可能是以下原因：</p>
                        <ul>
                            <li>视频文件格式不支持</li>
                            <li>网络连接问题</li>
                            <li>文件本身只包含音频</li>
                        </ul>
                        <button onclick="retryVideo()" class="retry-btn">重试加载</button>
                    </div>
                </div>
                
                <div class="video-info">
                    <div class="video-meta">
                        <span class="course-category" id="courseCategory">企服公开会</span>
                        <span class="view-count" id="viewCount">观看次数: 0</span>
                        <span class="video-duration" id="videoDuration">时长: 00:00</span>
                    </div>
                    
                    <div class="video-description" id="videoDescription">
                        课程介绍内容...
                    </div>
                    
                    <!-- 评分区域 -->
                    <div class="rating-section">
                        <h4>课程评分</h4>
                        <div class="rating-display">
                            <div class="stars" id="currentRating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="rating-text" id="ratingText">4.0 分 (123 人评价)</span>
                        </div>
                        
                        <div class="user-rating">
                            <span>您的评分：</span>
                            <div class="stars rating-input" id="userRating">
                                <i class="far fa-star" data-rating="1"></i>
                                <i class="far fa-star" data-rating="2"></i>
                                <i class="far fa-star" data-rating="3"></i>
                                <i class="far fa-star" data-rating="4"></i>
                                <i class="far fa-star" data-rating="5"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论区域 -->
                    <div class="comments-section">
                        <h4>课程评论</h4>
                        
                        <div class="comment-form">
                            <textarea id="commentInput" placeholder="分享您的学习心得..."></textarea>
                            <button class="submit-comment-btn" id="submitComment">发表评论</button>
                        </div>
                        
                        <div class="comments-list" id="commentsList">
                            <!-- 评论将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 表单弹窗 -->
    <div class="form-modal" id="formModal">
        <div class="form-content">
            <div class="form-header">
                <h3>继续观看视频</h3>
                <p>请填写以下信息，获取完整视频观看权限</p>
                <button class="close-form-btn" id="closeForm">&times;</button>
            </div>
            <form class="contact-form" id="contactForm">
                <div class="form-group">
                    <label for="name">姓名 *</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="phone">手机号 *</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="company">公司名称 *</label>
                    <input type="text" id="company" name="company" required>
                </div>
                <div class="form-group">
                    <label for="position">职位 *</label>
                    <input type="text" id="position" name="position" required>
                </div>
                <div class="form-group">
                    <label for="service">感兴趣的服务 *</label>
                    <select id="service" name="service" required onchange="handleServiceChange()">
                        <option value="">请选择</option>
                        <option value="融资外包服务">融资外包服务</option>
                        <option value="常顾服务">常顾服务</option>
                        <option value="合伙人加盟">合伙人加盟</option>
                        <option value="其他">其他</option>
                    </select>
                    <input type="text" id="customService" name="customService" placeholder="请填写您感兴趣的服务" style="display: none; margin-top: 8px;">
                </div>
                <button type="submit" class="submit-form-btn">提交并继续观看</button>
            </form>
        </div>
    </div>

    <!-- 简洁底部 -->
    <footer class="footer-simple">
      <div class="footer-main">
        <!-- 公司信息 -->
        <div class="footer-brand" style="flex:1 1 0;">
          <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/%E9%87%91%E9%A1%BE%E4%BA%91logo.jpg" alt="金顾云logo" class="footer-logo">
          <div class="footer-tagline">让融资更简单</div>
        </div>
        <!-- 栏目三栏 -->
        <div class="footer-columns" style="flex:1.5 1 0; min-width:260px;">
          <div class="footer-nav-section">
            <h4>融顾服务</h4>
            <a href="finance-outsourcing-center.html">融资外包</a>
            <a href="consultant.html">常顾服务</a>
            <a href="finance-course.html">金顾云学院</a>
          </div>
          <div class="footer-nav-section">
            <h4>关于我们</h4>
            <a href="about.html">公司简介</a>
            <a href="club.html">金顾云俱乐部</a>
            <a href="partner.html">合伙人加盟</a>
          </div>
          <div class="footer-nav-section">
            <h4>联系我们</h4>
            <a href="tel:0755-86561203">0755-86561203</a>
            <a href="mailto:service@cfcyun.com">service@cfcyun.com</a>
            
          </div>
        </div>
        <!-- 二维码区域 -->
        <div class="footer-qr" style="flex:3.5 1 0; max-width:900px;">
          <h4>扫码关注</h4>
          <div class="qr-grid">
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/1.jpg" alt="金顾云小程序" class="footer-qr-img">
              <span>金顾云小程序</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/2.jpg" alt="金顾云俱乐部小程序" class="footer-qr-img">
              <span>金顾云俱乐部小程序</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/3.jpg" alt="金顾云公众号" class="footer-qr-img">
              <span>金顾云公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/4.jpg" alt="金顾云俱乐部公众号" class="footer-qr-img">
              <span>金顾云俱乐部公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/5.jpg" alt="金顾云公益基金会公众号" class="footer-qr-img">
              <span>金顾云公益基金会公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/6.jpg" alt="金顾云视频号" class="footer-qr-img">
              <span>金顾云视频号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/7.jpg" alt="金顾云俱乐部视频号" class="footer-qr-img">
              <span>金顾云俱乐部视频号</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div class="footer-bottom">
        <div class="footer-copyright">
          <span>© 2024 金顾云集团 版权所有</span>
                      <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">沪ICP备2022025984号-3</a>
          <span>沪公网安备31010102007667号</span>
        </div>
        <div class="footer-links">
          <a href="/privacy">隐私政策</a>
          <a href="/terms">服务条款</a>
        </div>
      </div>
    </footer>
    <style>
    /* 简洁底部样式（参考首页） */
    .footer-simple {
      background: #f8f9fa;
      border-top: 1px solid #e9ecef;
      margin-top: 60px;
      width: 100%;
    }
    .footer-main {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      padding: 48px 40px 32px 40px;
      box-sizing: border-box;
      gap: 32px;
    }
    .footer-brand {
      min-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .footer-logo {
      width: 80px;
      height: auto;
      margin-bottom: 16px;
      border-radius: 6px;
    }
    .footer-tagline {
      color: #6c757d;
      font-size: 1.1em;
      font-weight: 500;
      margin-top: 0;
    }
    .footer-columns {
      display: flex;
      gap: 48px;
      justify-content: center;
      min-width: 260px;
    }
    .footer-nav-section {
      min-width: 120px;
    }
    .footer-nav-section h4 {
      font-size: 1em;
      font-weight: 600;
      color: #343a40;
      margin-bottom: 16px;
      margin-top: 0;
    }
    .footer-nav-section a {
      display: block;
      color: #6c757d;
      text-decoration: none;
      margin-bottom: 8px;
      font-size: 0.9em;
      transition: color 0.2s ease;
    }
    .footer-nav-section a:hover {
      color: #c00;
    }
    .footer-qr {
      min-width: 320px;
      max-width: 900px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .footer-qr h4 {
      font-size: 1.1em;
      font-weight: 600;
      color: #343a40;
      margin-bottom: 16px;
      margin-top: 0;
      text-align: center;
    }
    .qr-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 18px;
      justify-content: flex-start;
      max-width: 900px;
    }
    .footer-qr-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 80px;
    }
    .footer-qr-img {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    .footer-qr-img:hover {
      transform: scale(1.05);
    }
    .footer-qr-item span {
      font-size: 0.7em;
      color: #6c757d;
      text-align: center;
      margin-top: 2px;
      line-height: 1.2;
      word-wrap: break-word;
      hyphens: auto;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 40px;
      border-top: 1px solid #e9ecef;
      font-size: 0.85em;
      color: #6c757d;
      width: 100%;
      box-sizing: border-box;
    }
    .footer-copyright {
      display: flex;
      gap: 24px;
    }
    .footer-links {
      display: flex;
      gap: 24px;
    }
    .footer-links a {
      color: #6c757d;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-links a:hover {
      color: #c00;
    }
    /* 响应式设计 */
    @media (max-width:1024px) {
      .footer-main {
        flex-wrap: wrap;
        gap: 24px;
        padding: 32px 16px 24px 16px;
      }
      .footer-columns {
        gap: 24px;
      }
      .footer-qr {
        min-width: 220px;
        max-width: 100%;
      }
      .qr-grid {
        gap: 12px 12px;
        max-width: 100%;
      }
    }
    @media (max-width: 900px) {
      .footer-main {
        flex-direction: column;
        gap: 24px;
        padding: 20px 8px;
      }
      .footer-columns {
        flex-direction: column;
        gap: 8px;
        min-width: 0;
      }
      .footer-qr {
        align-items: flex-start;
        min-width: 0;
      }
      .qr-grid {
        justify-content: flex-start;
      }
    }
    @media (max-width: 700px) {
      .footer-main {
        gap: 12px;
        padding: 10px 2px;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
      }
    }
    </style>

    <script src="js/main.js"></script>
    <script src="js/academy-courses.js"></script>
</body>
</html> 